<template>
  <view class="container">
    <unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" 
		:collection="collectionList"
		:where="where"
		field="category_id,menu_id,title,create_date"
		:getcount="true"
		orderby="create_date desc"
		:page-size="20">
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="data">
        <uni-list>
          <uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true"
		   @click="handleItemClick(item._id)">
            <template v-slot:body>
              <text>
                {{item.title}}
              </text>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
      <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
    </unicloud-db>
  </view>
</template>

<script>
  const db = uniCloud.databaseForJQL();
  const dbCollectionName = 'xasa-work';
  export default {
    data() {
      return {
        collectionList: dbCollectionName,
		where:{},
		//[ db.collection(dbCollectionName).field('category_id,menu_id,title,create_date').getTemp()],
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        }
      }
    },
	onLoad(e) {
		const {menu_id,c,t}=e;
		let w={};
		if(menu_id)	w.menu_id=menu_id;
		if(c) w.category_id=c;
		//if(t) w.title={'$regex':t};
		if(t){
			this.$nextTick(()=>{
				uni.setNavigationBarTitle({
					title:t
				})
			})
		}
		this.where=w;
	},

/* 	onShow(){
		const {menu_id,c,t}=this.$root.$mp.query;
		let w={};
		if(menu_id){w.menu_id=menu_id}
		if(c){w.category_id=c}
		if(t){w.title={'$regex':t}
		}
		console.log(menu_id,c,t)
	}, */

    onPullDownRefresh() {
      this.$refs.udb.loadData({
        clear: true
      }, () => {
        uni.stopPullDownRefresh()
      })
    },
    onReachBottom() {
      this.$refs.udb.loadMore()
    },
    methods: {
      handleItemClick(id) {
        uni.navigateTo({
          url: './detail?id=' + id
        })
      }
    }
  }
</script>

<style>
</style>
